<template>
  <!-- 1应用信息泄露 -->
  <div class="xd-model-1">
    <div class="xd-model-head">
      <img :src="require('@/assets/xd/new/profilePicture1.png')" alt="" class="itp">
      <div class="itc">
        风险警告
      </div>
    </div>

    <div class="tc">
      <div class="tc-List-1">
        <div class="scroll-div" :style="{ bottom: scrollTop + 'px' }">
          <div v-for="(item, index) in infoList2" :key="index" class="bg1 _item">
            <div class="body" @click="to1applicationScreen">
              <!-- <div v-html="insertImage(item.content)"></div> -->
              <img :src="require('@/assets/xd/new/Slice 7.png')"> {{ item.content }} <!-- 警告！淘宝app正在对ade的短信进行越权访问，请及时处理！
                    警告！支付宝app正在对ade的热点进行越权访问，请及时处理！
                    警告！抖音app正在对ade的通讯录进行越权访问，请及时提醒处理！
                    警告！淘宝app正在对ade的短信进行越权访问，请及时提醒！
                    警告！支付宝app正在对ade的热点进行越权访问，处理！
                    警告！抖音app正在对ade的通讯录进行越权访问，请及时提醒！ -->
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

      infoList2: [
        {
          content: '警告！抖音app正在对阿凡的通讯录进行越权访问！'
        }, {
          content: '警告！和聊app正在对李四的通讯录进行越权访问！'
        },
        {
          content: '警告！和聊app正在对李四的通讯录进行越权访问！'
        },
        {
          content: '警告！支付宝app正在对张三的热点进行越权访问！'
        },

        {
          content: '警告！抖音app正在对李四的通讯录进行越权访问！'
        },
        {
          content: '警告！和聊app正在对李四的通讯录进行越权访问！'
        },


        {
          content: '警告！淘宝app正在对萧峰的短信进行越权访问！'
        },
      ],
      scrollTop: 0
    };
  },
  mounted() {
    let that = this;
    setTimeout(function () {
      that.getData();
    }, 0);
  },
  methods: {
    getData() {
      // 定时获取数据
      let that = this;
      setInterval(() => {
        that.infoList2.unshift({
          content: "警告！抖音app正在对ade的通讯录进行越权访问！",
        }, {
          content: '警告！和聊app正在对李四的通讯录进行越权访问！'
        },
          {
            content: '警告！支付宝app正在对张三的热点进行越权访问！'
          },

          {
            content: '警告！抖音app正在对李四的通讯录进行越权访问！'
          },
        );
      }, 1000);
      setInterval(() => {
        that.scrollTop--;
      }, 50);
    },
    to1applicationScreen() {
      this.$router.push('/1applicationScreen')
    },

  }
};
</script>

<style lang="scss" scoped>
.itp {
  height: 40px;
  padding-top: 10px;
}

.itc {
  position: absolute;
  top: 10px;
  left: 45px;
  /* // width: 150px; */
  height: 30px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

.xd-model-1 {
  position: relative;
  z-index: 1000;

  .xd-model-head {
    width: 40%;
    // position: absolute;
    top: 100px;
    left: 50px;
    z-index: 100;
    background-image: url("~@/assets/xd/new/title.png");
    background-repeat: no-repeat;
    background-size: 40% 100%;

  }
}

.tc {
  // position: absolute;
  // top: 150px;
  // left: 50px;
  width: 350px;
  height: 250px;
  z-index: 100;
}

.tc-List-1 {
  background-color: rgba(61, 93, 120, 0.8);
}

.bg1 {
  /* padding: 30px; */
  width: 100%;
  height: 100%;
  background: rgba(36, 121, 245, 0.1);
  border-radius: 0px 0px 0px 0px;

  z-index: 10000;

  .tp {

    height: 50px;
  }

  .body {
    // position: absolute;

    padding: 10px;
    /* font-weight: bold; */
    color: #ffffff;
    font-weight: bold;
    text-align: left;
    text-align: left;
    font-size: 13px;
  }
}

.tc-List-1 {
  position: relative;
  height: 100%;
  overflow: hidden;
}
</style>